import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { Form, InputNumber } from 'antd'
import _ from 'loadsh'
import { Line, Cell, Split } from '@components/ApprovePre/Approve'
import PayTable from './PayTable'
import Text from '@components/Text'
import style from './Step.module.less'
import { strToNum } from '@src/assets/js/tool'

const { Item, List } = Form

class Main extends Component {
  state = {
    keyTitleMap: {},
    fileList: []
  }

  initKeyTitleMap () {
    const map = {}
    const list = _.get(this.props.instance || {}, 'currentStep.vars', [])
    list.forEach(li => {
      map[li.key] = li.title
    })
    this.setState({
      keyTitleMap: map
    })
  }

  initData () {
    this.$get('/api/xapc/remuneration', {
      caseid: this.props.caseDetail.id,
      flowid: this.props.instance.id
    }).then(res => {
      const d = res.data
      const c = this.props.formRef.current
      if (c !== null && res.data !== null) {
        // const l = d.list.sort((a, b) => {
        //   return `${a.caseno_desc}${a.orderno}` - `${b.caseno_desc}${b.orderno}`
        // })
        c.setFieldsValue({
          vars: {
            zcybaochou_fee_acceptance: res.data.fee_acceptance || 0,
            remuneration_list01: d.list.map(li => {
              li.caseno_desc = li.caseno_desc || li.counter_caseno_desc
              return li
            })
          }
        })
      }
    })
  }

  changeAmount (v, index) {
    const c = this.props.formRef.current
    const o = c.getFieldsValue(['vars'])
    const list = o.vars.remuneration_list01
    const n = Math.round(v * 62.5) / 100
    const current = list[index]
    if (list.length > 1 && current.orderno === 1) {
      const name = current.caseno_desc
      list.filter(li => li.caseno_desc === name && li !== current).forEach(li => {
        li.amount = strToNum(n)
        li.real_amount = strToNum(n) + strToNum(li.closuredoc_amount) + strToNum(li.subsidy_amount)
      })
    }
    const cli = list[index]
    cli.real_amount = strToNum(v) + strToNum(cli.closuredoc_amount) + strToNum(cli.subsidy_amount)
    c.setFieldsValue({
      vars: {
        ...o.vars,
        remuneration_list01: list
      }
    })
  }

  formatMoney (v) {
    if (v !== undefined && v !== null) {
      const str = `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      return `${str} 元`
    }
    return '0 元'
  }

  componentDidUpdate (prev) {
    if (this.props.instance !== prev.instance) {
      this.initKeyTitleMap()
    }
  }

  componentDidMount () {
    this.initKeyTitleMap()
    this.initData()
  }

  render () {
    const { keyTitleMap } = this.state
    return (
      <div>
        <Line>
          <Cell>
            <Item labelCol={{ flex: '96px' }} label='操作者'>
              <span>{this.props.userInfo.realname}</span>
            </Item>
          </Cell>
        </Line>
        <Line>
          <Cell>
            <Item labelCol={{ flex: '96px' }} name={['vars', 'zcybaochou_fee_acceptance']} label={keyTitleMap.zcybaochou_fee_acceptance} rules={[{ required: true, message: `${keyTitleMap.zcybaochou_fee_acceptance}不能为空` }]}>
              <Text format={v => this.formatMoney(v)} />
            </Item>
          </Cell>
          <Split />
          {/* <Cell>
            <Item labelCol={{ flex: '96px' }} name={['vars', 'zcybaochou_hearing_count']} label={keyTitleMap.zcybaochou_hearing_count} rules={[{ required: true, message: `${keyTitleMap.zcybaochou_hearing_count}不能为空` }]}>
              <InputNumber placeholder={`请输入${keyTitleMap.zcybaochou_hearing_count}`} min={0} style={{ width: '100%' }} />
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item labelCol={{ flex: '96px' }} name={['vars', 'zcybaochou_closuredoc_count']} label={keyTitleMap.zcybaochou_closuredoc_count} rules={[{ required: true, message: `${keyTitleMap.zcybaochou_closuredoc_count}不能为空` }]}>
              <InputNumber placeholder={`请输入${keyTitleMap.zcybaochou_closuredoc_count}`} min={0} style={{ width: '100%' }} />
            </Item>
          </Cell> */}
        </Line>
        <PayTable caseDetail={this.props.caseDetail} />
        <div className={style['table-container']}>
          <table className={style.table}>
            <thead>
              <tr>
                <th>仲裁员姓名</th>
                <th>仲裁员报酬</th>
                <th>裁决书制作报酬</th>
                <th>办案交通、通讯费补贴/人</th>
                <th>案号</th>
                <th className={style.right}>仲裁员实发各项报酬、补贴金额</th>
              </tr>
            </thead>
            <tbody>
              <List name={['vars', 'remuneration_list01']}>
                {fields => {
                  return fields.map((field, index) => {
                    return (
                      <tr key={index}>
                        <td>
                          <Item name={[field.name, 'name']} noStyle><Text /></Item>
                        </td>
                        <td>
                          <Item name={[field.name, 'amount']} noStyle>
                            <InputNumber
                              placeholder='请输入' className={style.full} precision={2} formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                              parser={value => value.replace(/\$\s?|(,*)/g, '')}
                              onChange={v => this.changeAmount(v, index)}
                            />
                          </Item>
                        </td>
                        <td>
                          <Item name={[field.name, 'closuredoc_amount']} noStyle>
                            <InputNumber
                              placeholder='请输入' className={style.full} precision={2} formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                              parser={value => value.replace(/\$\s?|(,*)/g, '')}
                              onChange={v => this.computeAmount(index)}
                            />
                          </Item>
                        </td>
                        <td>
                          <Item name={[field.name, 'subsidy_amount']} noStyle>
                            <InputNumber
                              placeholder='请输入' className={style.full} precision={2} formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                              parser={value => value.replace(/\$\s?|(,*)/g, '')}
                              onChange={v => this.computeAmount(index)}
                            />
                          </Item>
                        </td>
                        <td>
                          <Item name={[field.name, 'caseno_desc']} noStyle>
                            <Text />
                          </Item>
                        </td>
                        <td className={style.right}>
                          <Item name={[field.name, 'real_amount']} noStyle>
                            <Text format={v => this.formatMoney(v)} />
                          </Item>
                        </td>
                      </tr>
                    )
                  })
                }}
              </List>
            </tbody>
          </table>
        </div>
      </div>
    )
  }
}

Main.proptypes = {
  caseDetail: PropTypes.object,
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  formRef: PropTypes.object,
  dictionaries: PropTypes.object
}

Main.defaultProps = {
  caseDetail: {},
  userInfo: {},
  instance: {},
  formRef: {},
  dictionaries: {}
}

const mapState = mapStateToProps(function (state) {
  return {
    userInfo: state.basic.userInfo
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(Main)
